import React from 'react'
import './Login.scss'
// 导入antd
import { Button, Card, Form, Input, Checkbox } from 'antd'
// 导入antd图标
import { UserOutlined, LockOutlined } from '@ant-design/icons';
// 导入项目登录图片
import logo from '@/assets/logo.png'
import { useDispatch } from 'react-redux';
import { useHistory, useLocation, Redirect } from 'react-router-dom';
import { login } from '@/store/actions/login.js';
import { isAuth } from '@/utils'
export const Login = () => {
  // 初始化history
  const history = useHistory()
  const location = useLocation()
  // 初始化dispatch
  const dispatch = useDispatch()
  // 提交表单且数据验证成功后回调事件
  // values自动拿到form表单的表单项的值
  // 声明路由跳转变量

  const onFinish = async (values) => {
    // 异常捕获
    try {
      // 发送请求action
      await dispatch(login(values.mobile, values.code))
      console.log('Received values of form: ', values);
      // 路由跳转
      //  history.replace('/home')
      // 更新跳转规则:跳回源页面
      //等下下方if判断: history.replace(location.state ? location.state.from :'/home')
      // if(location.state){
      //   history.replace(location.state.from)
      //   console.log(1);
      // } else {
      //   console.log(2);
      //   history.replace('/home')
      // }
      // 方式三:
      let from
   
      if (location.state != null) {
        from = location.state.from
        
      }
      // 设置默认跳转为/home
      const  urlTo = from || '/home'
      history.replace(urlTo)
      // repalce和push的应用场景:https://www.php.cn/js-tutorial-467089.html
      // replace不会形成history不可返回上一层,push可以形成history可以返回上一层

    } catch (error) {
  console.dir(error)
  // 展开打印对象,更容易看到错误数据的结构
}
  };
return (
  <div className='login'>
    <Card className='card' bordered={false} style={{ width: 330 }}>
      {/* 图片Logo */}
      <img src={logo} alt=''></img>
      {/* 表单区域 */}
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{
          remember: true,//1:对所有过往输入进行记录,默认初始值是空白
          // 2:指定初始用户和验证码显示内容
          mobile: '13911111111',
          code: '246810',

        }}
        // 目前效果来看,下面这行可有可无
        validateTrigger={['onBlur', 'onChange']}
        onFinish={onFinish}
      >
        <Form.Item
          name="mobile"
          // 用户登录手机号验证
          rules={[
            {
              required: true,
              message: 'Please input your mobile!',
            },
            {
              pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
              message: '您的手机号不合法'
            }
          ]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="mobile" />
        </Form.Item>
        <Form.Item
          name="code"
          //验证码规则
          rules={[
            {
              required: true,
              message: 'Please input your verifyCode!',
            },
            {
              pattern: /^\d{6}$/,
              message: '您要输入正确的验证码哦!'
            }
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="text"
            placeholder="code"
          />
        </Form.Item>
        {/* 验证同意隐私协议 */}
        <Form.Item>
          <Form.Item name="agreement" valuePropName="checked" noStyle rules={[
            {
              validator: (_, value) =>
                value ? Promise.resolve() : Promise.reject(new Error('请您同意隐私协议')),
            },
          ]}>
            <Checkbox className='contract'>我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
          </Form.Item>

          {/* <a className="login-form-forgot" href="">
          Forgot password
        </a> */}
        </Form.Item>

        <Form.Item>
          <Button size='middle' type="primary" htmlType="submit" style={{ width: '100%' }} className="login-form-button">
            登录
          </Button>
          Or <a href="###">去注册!</a>
        </Form.Item>
      </Form>

    </Card>
  </div>
)
}

